<template>

<div>
    <!--工具条-->
    <el-col
      :span="24"
      class="toolbar"
      style="
        padding-bottom: 0px;
        padding-bottom: 0px;
        display: flex;
        justify-content: space-between;
      "
    >
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="userStatusRefresh">{{$t('publicbtn.refresh')}}</el-button>
        </el-form-item>
      </el-form>

   <el-form :inline="true" style="display:flex;align-item:center;">
       <excelexport></excelexport>
      </el-form>
    </el-col>

  <div class="binance">
<div  @scroll.passive="handleScroll($event)" ref="messagesContainer">
<!-- v-el-table-infinite-scroll="load" v-el-table-infinite-scroll="handleScroll"  -->
 <el-table 


      v-loading="Loading"
      id="out-table"
      :data="binancelist"
      style="width: 100%;">

      <el-table-column
        prop="coin"
        label="coin">
      </el-table-column>

      <el-table-column
        prop="network"
        label="network">
      </el-table-column>

      <el-table-column
        prop="withdrawEnable"
        label="withdrawEnable">
        <template slot-scope="props">
          {{
            props.row.withdrawEnable?'true':'false'
          }}
        </template>   
        </el-table-column>

      <el-table-column
        prop="withdrawFee"
        label="withdrawFee">
      </el-table-column>

            <el-table-column
        prop="withdrawMin"
        label="withdrawMin">
      </el-table-column>

        <el-table-column
        prop="minConfirm"
        label="minConfirm">
      </el-table-column>

      
        <el-table-column
        prop="addressRegex"
        label="addressRegex">

      </el-table-column>
    </el-table>

</div>
</div>
  </div>
</template>

<script>
import excelexport from "@/components/export.vue";
import elTableInfiniteScroll from 'el-table-infinite-scroll';
import { binance} from '@/api/api'
export default {
name:'binance',
  components: {
    excelexport,
  },
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
data(){
    return{
        Loading :true,
        currentId:15,
        indexstart:0,
        binancelistData:[],
        binancelist:new Array(),
        prevTop:null

    }
},

methods:{
   
   
    userStatusRefresh(){
        this.getBinanceCoinInfo()
    },
 getBinanceCoinInfo(){
        this.Loading = true

     binance('/market/getBinanceCoinInfo').then(res=>{
      var data =res.data
    if(data.code==200){
        this.binancelistData = data.data
        // this.binancelistData = data.data.splice(0,17)
        // this.changeSel(this.currentId)

        data.data.map((binItem)=>{
        binItem.networkList.map((networkList)=>{
            this.binancelist.push(networkList)
            
        })
        })
        this.Loading = false
        }else{
            this.$message({
            message: data.data.message,
            type: "error"
            })
        }
        })
    },
     
        changeSel(currentId,e){
                let _this= this
                // 当前大于总条数
                if(currentId>this.binancelistData.length){
                    currentId = this.binancelistData.length
                }
                for(let i = this.indexstart; i<currentId;i++){
                    for(let j = 0;j<_this.binancelistData[i]['networkList'].length;j++){
                        _this.binancelist.push(_this.binancelistData[i]['networkList'][j])
                    }
                }
                // 本次循环结束 保留本次循环的标
                this.indexstart = JSON.parse(JSON.stringify(currentId))
        },
//函数防抖
        debounce(func, wait) {
                let timeout;
                return function () {
                    let context = this;
                    let args = arguments;
                    if (timeout) clearTimeout(timeout);
                    timeout = setTimeout(() => {
                        func.apply(context, args)
                    }, wait);
                }
            },
            
        handleScroll(e){
            // 判断向下 还是上滚动
                // let direction = e.deltaY > 0 ? 'down' : 'up'
                if(this.binancelistData.length>=this.currentId){
                    // if(direction =='down'){
                    this.currentId = this.currentId +10
                        this.changeSel(this.currentId,e);
                    // }
                }
            },
        },
mounted(){

    this.getBinanceCoinInfo()



        },
}
</script>

<style scoped>
#out-table .el-table__row div{
     color:red
 }
</style>